<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenWrite</title>
    <link rel="stylesheet" href="openwrite.css">
</head>
<body>
    <div class="container">
        <div class="toolbar">
            <button onclick="formatText('bold')" title="Bold"><b>B</b></button>
            <button onclick="formatText('italic')" title="Italic"><i>I</i></button>
            <button onclick="formatText('underline')" title="Underline"><u>U</u></button>
            <button onclick="formatText('strikeThrough')" title="Strikethrough">S</button>
            <button onclick="formatText('justifyLeft')" title="Align left">⬅</button>
            <button onclick="formatText('justifyCenter')" title="Center">⬜</button>
            <button onclick="formatText('justifyRight')" title="Align right">➡</button>
            <button onclick="formatText('insertUnorderedList')" title="Unordered list">• List</button>
            <button onclick="formatText('insertOrderedList')" title="Ordered list">1. List</button>
            <button onclick="insertLink()" title="Insert link">🔗</button>
            <button onclick="insertImage()" title="Insert image">🖼️</button>
            <input type="color" id="colorPicker" title="Text color">
            <select id="fontSize" onchange="changeFontSize(this.value)">
                <option value="1">Small</option>
                <option value="3">Normal</option>
                <option value="5">Large</option>
                <option value="7">Very large</option>
            </select>
            <select id="fontName" onchange="changeFontName(this.value)">
                <option value="Arial">Font</option>
                <option value="Arial">Arial</option>
                <option value="Times New Roman">Times</option>
                <option value="Verdana">Verdana</option>
                <option value="Courier New">Courier</option>
            </select>
            <button onclick="clearFormatting()" title="Clear formatting">🧹</button>
        </div>
        <div class="editor" contenteditable="true"></div>
    </div>
    <script src="openwrite.js"></script>
</body>
</html>
